<template>
    <div class="grid-content bg-purple">
        <el-menu
            :default-openeds="['1', '6']"
            default-active="1"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="#bfcbd9"
            active-text-color="#20a0ff">
            <el-menu-item index="index">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-document"></i>数据管理
                </template>
                <el-menu-item index="userList">用户列表</el-menu-item>
                <el-menu-item index="shopList">商家列表</el-menu-item>
                <el-menu-item index="foodList">食品列表</el-menu-item>
                <el-menu-item index="orderList">订单列表</el-menu-item>
                <el-menu-item index="adminisList">管理员列表</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-plus"></i>添加数据
                </template>
                <el-menu-item index="addShop">添加商铺</el-menu-item>
                <el-menu-item index="addGoods">添加商品</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-star-on"></i>图表
                </template>
                <el-menu-item index="chart">用户分布</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-edit"></i>编辑
                </template>
                <el-menu-item index="vueEdit">文本编辑</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-setting"></i>设置
                </template>
                <el-menu-item index="adminSet">管理员设置</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
                <template slot="title">
                    <i class="el-icon-warning"></i>说明
                </template>
                <el-menu-item index="explain">说明</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
export default {
    components: {
        username() {
            return this.$route.params.username;
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        goBack() {
            window.history.length > 1
                ? this.$router.go(-1)
                : this.$router.push("/");
        }
    }
};
</script>
<style scoped>
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    height: 100%;
    background-color: #324157;
}
.row-bg {
    background-color: #f9fafc;
}
.content {
    overflow-x: hidden;
}
.el-menu .el-menu-item {
    padding-left: 40px;
    background-color: #324157;
}
.el-menu .el-submenu {
    background-color: #324157;
}
.el-menu .el-submenu > div:hover {
    background-color: #48576a;
}

.el-submenu .el-submenu__title i,
.el-menu-item .el-icon-menu {
    font-weight: bold;
    color: #bfcbd9;
}
.el-submenu .el-menu .el-menu-item {
    background-color: #1f2d3d;
}
.el-submenu .el-menu .el-menu-item:hover {
    background-color: #48576a;
}

.el-submenu {
}
</style>